<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { getCourses } from '../services/api';

const router = useRouter();
const coursesData = ref({ courseList: [], total: 0 });
const loading = ref(true);
const currentPage = ref(1);
const pageSize = ref(8);
const totalPages = computed(() => Math.ceil(coursesData.value.total / pageSize.value));

const loadCourses = async (page = 1) => {
  try {
    loading.value = true;
    currentPage.value = page;
    coursesData.value = await getCourses(page, pageSize.value);
  } catch (error) {
    console.error('加载课程失败:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadCourses(1);
});

const navigateToVideo = (courseId) => {
  router.push(`/video/${courseId}`);
};

const changePage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    loadCourses(page);
  }
};
</script>

<template>
  <div>
    <h1 class="text-3xl font-bold mb-8">精选课程</h1>
    
    <div v-if="loading" class="flex justify-center items-center py-10">
      <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-500"></div>
    </div>
    
    <div v-else-if="coursesData.courseList.length === 0" class="text-center py-10">
      <p class="text-gray-500">暂无课程数据</p>
    </div>
    
    <div v-else class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <div 
        v-for="course in coursesData.courseList" 
        :key="course.id" 
        class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transform transition hover:scale-105"
        @click="navigateToVideo(course.id)"
      >
        <div class="relative pb-[56.25%]">
          <img :src="course.coverUrl || course.cover" alt="课程封面" class="absolute inset-0 w-full h-full object-cover" @error="e => e.target.src = 'https://picsum.photos/id/42/400/300'">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold mb-2 whitespace-nowrap overflow-hidden text-ellipsis" style="max-width: 100%;">{{ course.title }}</h3>
          <div class="flex flex-wrap gap-2">
            <span 
              v-for="(tag, index) in course.tags ? course.tags.split(',') : []" 
              :key="index"
              class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800"
            >
              {{ tag }}
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分页组件 -->
    <div v-if="coursesData.total > 0" class="flex justify-center mt-8">
      <div class="flex items-center space-x-2">
        <button 
          @click="changePage(currentPage - 1)" 
          :disabled="currentPage === 1"
          class="px-4 py-2 rounded border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          上一页
        </button>
        
        <div class="flex space-x-1">
          <button 
            v-for="page in totalPages" 
            :key="page" 
            @click="changePage(page)"
            :class="[
              'px-4 py-2 rounded',
              currentPage === page 
                ? 'bg-blue-500 text-white' 
                : 'border border-gray-300'
            ]"
          >
            {{ page }}
          </button>
        </div>
        
        <button 
          @click="changePage(currentPage + 1)" 
          :disabled="currentPage === totalPages"
          class="px-4 py-2 rounded border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          下一页
        </button>
      </div>
    </div>
  </div>
</template>
